<template>
  <div id="div1" @click.self="showInfo('2、父元素', $event)">
    <button @click="showInfo('1、子元素', $event)">self示例</button>
  </div>
</template>

<script lang="ts">
import { reactive, ref } from "vue";
export default {
  setup() {
    function showInfo(msg, event) {
      console.log(msg, event.target);
    }
    return { showInfo };
  },
};
</script>
<style scoped>
#div1 {
  height: 100px;
  line-height: 100px;
  text-align: center;
  width: 200px;
  background: yellow;
}
</style>
